<template>
  <div style="height: 100%; overflow: hidden">

    <view-box ref="viewBox" class="shop">
      <!-- 搜索商品 -->
      <x-header :left-options="{backText: ''}" >
        <div class="head-top-input">
          <input v-focus="true" @focus="selectBtn=true" @blur="selectBtn=false"/>
        </div>
        <div slot="right">
          <div v-if="selectBtn" @click="search">
            搜索
          </div>
          <div v-else @click="showMenus=true">
            <x-icon type="more" class="icon-white"></x-icon>
          </div>
        </div>
      </x-header>

      <group>
        <cell class="shop-list" v-for="(item,index) in list" :key="item.id" @click.native="onClickList">
          <div slot="icon" class="shop-mainpic">
            <img  :src="item.url">
          </div>
          <div slot="" class="shop-right">
            <h4 class="shop-til"><badge text="包邮" v-show="index!=1"></badge>{{item.til}}</h4>
            <div>
              <span class="an-biaoqian">紧凑型</span>
              <span class="an-biaoqian">ATX大板</span>
            </div>
            <div class="an-shop-info">
              <span class="color-Danger">￥<span class="money">{{item.money}}</span></span>
              <span>{{item.address}}</span>
            </div>
          </div>
        </cell>
      </group>

      <div v-transfer-dom>
        <actionsheet :menus="menus" v-model="showMenus" show-cancel></actionsheet>
      </div>

    </view-box>
    <router-view ></router-view>
  </div>

</template>

<script>
  import {ViewBox, XHeader,XInput,Group,Actionsheet, TransferDom,Cell,Badge   } from 'vux'
  import {domeShopList} from '@/api/data'
    export default {
        name: "shop-select",
      directives: {
        TransferDom,
      },
      components: {
        ViewBox,
        XHeader,
        XInput,
        Group,
        Actionsheet,
        Cell ,
        Badge,
      },
      data () {
        return {
          menus: {
            menu1: '首页',
            menu2: '购物车'
          },
          showMenus: false,
          selectBtn:false,
          list:[],
        }
      },
      methods:{
        search(){
          this.list = domeShopList();
          console.log('开始查询');
        },
        onClickList(){
          this.$router.push({path:'/shopSelect/shopInfo'});
        }
      }
    }
</script>

<style lang="less">
  //@import "../../styles/anstyle";
.head-top-input{
  margin-top: 3px;
  height: 35px;
  width: 100%;
  background-color: #FFFFFF;
  line-height: 35px;
  border-radius: 30px;
  input{
    margin: 0 15px;
    height: 30px;
    border: none;
    outline: none;
  }
}

</style>
